<template>
  <div>
    <content-panel
      ref="contentRef"
      title="参数设置"
      :ops="{add: 'system:config:add', update: 'system:config:edit', delete: 'system:config:delete', export: 'system:config:export'}"
      :row-ops="{update: 'system:config:edit', delete: 'system:config:delete'}"
      search-label-width="55px"
      :search-props="searchProps"
      :table-props="tableProps"
      list-api="getConfigs"
      get-api="getConfig"
      delete-api="deleteConfig"
      @handle-add="handleAdd"
      @handle-update="handleUpdate"
      :import-and-export="{ exportUrl: '/system/config/export' }"
    >
      <template #ops>
        <el-button
          v-has-perm="['system:config:delete']"
          type="danger"
          plain
          size="small"
          @click="handleRefreshCache"
        >
          <template #icon>
            <Refresh />
          </template>
          刷新缓存
        </el-button>
      </template>
      <template #configType="scope">
        <dict-tag :options="$dict.yes_no" :value="scope.row.configType" />
      </template>
      <template #remark="scope">
        <el-tooltip
          :content="scope.row.remark"
          placement="top"
          effect="dark"
        >
          <span class="remark-box">{{ scope.row.remark }}</span>
        </el-tooltip>
      </template>
    </content-panel>

    <FormDialog
      ref="formDialog"
      :form-props="formProps"
      :width="50"
      :height="40"
      @save="save"
      @update="update"
    />

  </div>
</template>

<script setup>
import { Refresh } from "@element-plus/icons-vue"

const contentRef = ref(null)
const tableProps = [
  {label: '参数主键', prop: 'id'},
  {label: '参数名称', prop: 'configName', width: '180px'},
  {label: '参数键名', prop: 'configKey', width: '180px'},
  {label: '参数键值', prop: 'configValue'},
  {label: '系统内置', prop: 'configType', type: 'configType'},
  {label: '备注', prop: 'remark', type: 'remark'},
  {label: '创建时间', prop: 'createTime'},
  {label: '操作', prop: 'operate', type: 'operate'}
]

const searchProps = ref([
  {label: '参数名称', prop: 'configName', type: 'input', labelWidth: 5},
  {label: '参数键名', prop: 'configKey', type: 'input', labelWidth: 5},
  {label: '系统内置', prop: 'configType', type: 'select', options: $dict.yes_no, labelWidth: 5},
  {label: '创建时间', prop: 'createTime', type: 'date', labelWidth: 5}
])

function handleRefreshCache() {
  $xl.apis.refreshConfigCache().then(() => {
    $xl.modal.msgSuccess('刷新成功')
  })
}


const formDialog = ref(null)
const formProps = ref([
  {label: '参数名称', prop: 'configName', type: $formType.input()},
  {label: '参数键名', prop: 'configKey', type: $formType.input()},
  {label: '参数键值', prop: 'configValue', type: $formType.input()},
  {label: '系统内置', prop: 'configType', type: $formType.radio($dict.yes_no), default: 'Y', required: false},
  {label: '备注', prop: 'remark', type: $formType.textarea(), required: false}
])

function handleAdd() {
  formDialog.value.open('添加参数')
}


function save(form) {
  $xl.apis.saveConfig({
    params: form
  }).then(() => {
    formDialog.value.close()
    contentRef.value.getList()
  }).catch(err => {
    formDialog.value.close(err)
  })
}

function handleUpdate(row) {
  formDialog.value.open('修改参数', row)
}

function update(form) {
  $xl.apis.updateConfig({
    params: form
  }).then(() => {
    formDialog.value.close()
    contentRef.value.getList()
  }).catch(err => {
    formDialog.value.close(err)
  })
}


</script>


<style lang="scss" scoped>
.remark-box {
  white-space: nowrap;
  overflow: hidden;
}
</style>
